<section>
    <div class="container">
        <div class="row">
            <div class="col-md-10 col-sm-12">
                <article>

                    <h2>Enlighter WordPress Plugin</h2>
                    <div class="row">
                        <div class="col-md-6">
                            <p class="lead">Enlighter - The most simple way to use EnlighterJS. <br />
                                Full Visual-Editor-Integration. Build-in Theme Customizer. <br />
                                Ready-to-use, Ready-to-post!
                            </p>
                            <a class="btn btn-lg btn-primary" href="http://wordpress.org/plugins/enlighter/" role="button">Enlighter WordPress Plugin</a>
                        </div>
                        <div class="col-md-6">
                            <img class="featurette-image img-responsive" src="img/screenshot-2.jpg" alt="WordPress Visual Editor Integration" />
                        </div>
                    </div>

                    <h3>Tons of Features</h3>
                    <div class="bordered">
                    <div class="row">
                        <div class="col-md-6">
                            <h4>Theme Customizer</h4>
                            <p>
                                Modify the EnlighterJS Themes without any CSS Knowledge
                                <img class="featurette-image img-responsive" src="img/screenshot-8.jpg" alt="Theme Customizer" />
                            </p>
                        </div>
                        <div class="col-md-6">
                            <h4>Theme Live-Preview Mode</h4>
                            <p>
                                See all Theme modifications immediately
                                <img class="featurette-image img-responsive" src="img/screenshot-12.jpg" alt="Live Preview Mode" />
                            </p>
                        </div>
                    </div>
                    </div>

                    <h3>Feature List</h3>
                    <ul>
                        <li>Support for all common used languages</li>
                        <li>Theme Customizer including <strong>LIVE Preview Mode</strong></li>
                        <li>Inline Syntax Highlighting</li>
                        <li><strong>Full</strong> Visual-Editor (TinyMCE) Integration (Admin Panel + Frontend)</li>
                        <li>Easy to use Text-Editor mode through the use of Shortcodes</li>
                        <li>Advanced configuration options (CDN usage, ..) are available within the options page.</li>
                        <li>Supports code-groups (displays multiple code-blocks within a tab-pane)</li>
                        <li>Outputs in various formats like ordered lists or inline. Choose the method that works best for you.</li>
                        <li>Extensible language and theme engines - add your own one.</li>
                        <li>Simple CSS based themes</li>
                        <li>Integrated CSS file caching (suitable for high traffic sites)</li>
                        <li>EnlighterJS is written in MooTools. Requires MooTools v1.4+ (included) and client enabled javascript</li>
                    </ul>

                    <h3>System requirements</h3>

                    <ul>
                        <li>WordPress >= 3.9</li>
                        <li>PHP 5.3, including <code>json</code> functions</li>
                        <li>Webbrowser with enabled Javscript (required for highlighting)</li>
                        <li>Accessable cache directory (<code>/wp-content/plugins/enlighter/cache/</code>)</li>
                    </ul>

                    <h3>Installation</h3>
                    <p>You can install the Enlighter package automatically with WordPress` Plugin Manager or manually by uploading the full package.</p>
                    <ol>
                        <li>Download the .zip file of the plugin and extract the content</li>
                        <li>Upload the complete <code>enlighter</code> folder to the <code>/wp-content/plugins/</code> directory</li>
                        <li>Activate the plugin through the 'Plugins' menu in WordPress</li>
                        <li>Goto to the Enlighter settings page and select the default theme which should be used.</li>
                        <li>That's it! You're done. You can select an editor style for your codefragment or enter the following code into a post or page to highlight it (e.g. javascript): <code>[js]var enlighter = new EnlighterJS({});[/js]</code></li>
                    </ol>

                    <h3>Compatibility</h3>
                    <p>All browsers supported by MooTools (enabled Javascript required) and with HTML5 capabilities for "data-" attributes are compatible with Enlighter. It's possible that it may work with earlier/other browsers.
                        Generally Enlighter (which javascript part <a href="#" rel="nofollow">EnlighterJS</a> is based on <a href="http://mootools.net/" rel="nofollow">MooTools Javascript Framework</a>) should work together with jQuery in <a href="http://docs.jquery.com/Using_jQuery_with_Other_Libraries" rel="nofollow">noConflict Mode</a> - when you are using jQuery within your WordPress Theme/Page you have to take care of it!</p>

                    <ul>
                        <li>Chrome 10+</li>
                        <li>Safari 5+</li>
                        <li>Internet Explorer 6+</li>
                        <li>Firefox 2+</li>
                        <li>Opera 9+</li>
                    </ul


                </article>
            </div>

            <div class="col-md-2 hidden-xs hidden-sm">
                <ul id="content-nav" data-autogen="true"></ul>

                <div id="ToTop">
                    <a href="#" class="glyphicon glyphicon-upload" title="Scroll To Top"></a>
                </div>
            </div>
        </div>
    </div>
</section>